<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: black;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        //179000627余倍
        $(function () {
            $(document).click(function (e) {
                let xNew=e.offsetX-134;
                let yNew=e.offsetY-108;
                let left = $("img").offset().left;
                let top = $("img").offset().top;
                let xC=xNew-left;
                let yC=yNew-top;
                    if (xC < 0) {
                        left = xNew;
                        top = yNew;
                        $("img").stop();
                        $("img").attr("src", "img/player_left.gif").animate({
                            left: left,
                            top: top
                        }, 1000);
                    }
                    if (xC > 0) {
                        left = xNew;
                        top = yNew;
                        $("img").stop();
                        $("img").attr("src", "img/player_right.gif").animate({
                            left: left,
                            top: top
                        }, 1000);
                    }

               });

            $("img").dblclick(function () {
                $("img").attr("src", "img/playerbig_right.gif");
                $(document).click(function (e) {
                    let xNew=e.offsetX-100;
                    let yNew=e.offsetY-108;
                    let left = $("img").offset().left;
                    let top = $("img").offset().top;
                    let xC=xNew-left;
                    let yC=yNew-top;
                    // console.log(xNew,yNew);
                    if (xC < 0) {
                        left = xNew;
                        top = yNew;
                        $("img").stop();
                        $("img").attr("src", "img/playerbig_left.gif").animate({
                            left: left,
                            top: top
                        }, 500);
                    }
                    if (xC > 0) {
                        left = xNew;
                        top = yNew;
                        $("img").stop();
                        $("img").attr("src", "img/playerbig_right.gif").animate({
                            left: left,
                            top: top
                        }, 500);
                    }
                })

            })
        });


    </script>
</head>
<body>
<div >
    <p style="color: white">左键点击移动，双击人物变身</p>
    <img src="img/player_right.gif" style="position: absolute;" alt="">
</div>
</body>
</html>